import React, { Component , PureComponent} from 'react';
import '../../scss/Search.scss'
import { SearchOutlined,DeleteOutlined } from '@ant-design/icons';
import { good_search } from "../../tools/api";
import { good_hotsearch } from "../../tools/api";
import { Toast } from 'antd-mobile'
import { AliwangwangOutlined } from '@ant-design/icons';

class search extends PureComponent {

    state = {
        sousuofaxian:[],
        search:'',
        search_Arr:[],
        cunchuData:[],
        state_search:[],
    }
    render() {
        return (
            <div className='search'>
                <div className="tabller">
                    <span onClick={ this.subOne }>⬅</span>
                    <h2>搜索</h2>
                    <span>➡</span>
                </div> 

                <div className="input">
                    <i><SearchOutlined /></i>
                    {/* 防抖处理，为了不在输入的过程中添加历史记录 */}
                    <input type="text" onChange={ this.gogogo }  value={ this.state.search }  placeholder='搜索所有商品'/>
                    <span onClick={ this.search_go }>搜索</span>
                </div>

                <div className="lately_search">
                   <div className="cen">
                        <h3>最近搜索</h3>
                        <i onClick={ this.clearSearch }><DeleteOutlined /></i>
                   </div>
                </div>

                <div className="arr">
                    {
                        this.state.state_search.map((item,index)=>{
                            return (
                                <div className="li" key={ index }>
                                    {item}
                                </div>
                            )
                        })
                    }
                </div>
                    
                <div className="remensousuo">
                    <h3>热门搜索</h3>
                    <div className="ma">
                    {
                        this.state.sousuofaxian.map((item,index)=>{
                            return (
                                <span onClick={ () => { this.goSearch(item,index) } } key={ index }>{ item }</span>
                                )
                            })
                        }
                    </div>
                </div>
             
                <div className="show">
                    {
                        this.state.search_Arr.map((item,index)=>{
                            return (
                    <>
                    <h3 className='iconsbb'><AliwangwangOutlined /></h3>
                    <div className="show_shopping" key={ index } onClick={ () => { this.chuancan(item) } }>
                        <div className="left">
                            <div className="image">
                                <img src={ item.pic } alt="" />
                            </div>
                        </div>
                        <div className="right">
                            <div className="name1">{ item.brand}</div>
                            <div className="name2">{ item.brandEN }</div>
                            <div className="name3">{ item.name }</div>
                            <div className="name4">
                                <div className='mianshui'>{ item.salesPrice.name }<span>￥{ item.salesPrice.value } </span></div>
                            </div>
                        </div>
                    </div>
                    </>
                            )
                        })
                    }
                </div>
            </div>
        );
    }

    goSearch = (item) => {
        this.setState({ cunchuData:item },() => { this.search_go() })
    }

    // 点击传参到详情页 渲染详情页的数据
    chuancan = (item) => {
        console.log(item);
        this.props.history.push({ pathname:'/particulars',state:{id:item.id} })
    }
    
    gogogo = (e)=> {
        this.setState({ search:e.target.value })
    }
    
    search_go = () => {
        //!  这里是输入框不等于空的时候才去执行代码
        // 判断 如果输入框的内容不等于空的话 就让历史搜索中添加历史记录
        if( this.state.search != '' ) {
            this.state.state_search.push(this.state.search)
            localStorage.setItem('search',this.state.state_search)
            // 点击搜索之后 让输入框变为空
            this.setState({ search:[] })
            
            var data2 = this.state.search;
            good_search( { searchkey: data2 } ).then(
                response => { 
                    if( response.data.code == 200 ) {
                        this.setState({ search_Arr:response.data.list },() => { console.log(this.state.search_Arr); })
                        Toast.show({ content: '搜索到以下结果'})
                    }
                }
            )
        } else {
            //!  这里是输入框为空的时候才去执行代码
            var data3 = this.state.cunchuData;
            good_search( { searchkey: data3 } ).then(
            response => { 
                if( response.data.code == 200 ) {
                    this.setState({ search_Arr:response.data.list },() => { console.log(this.state.search_Arr); })
                    Toast.show({ content: '搜索到以下结果'})
                }
            }
        )
    }
}
    
    componentDidMount() { good_hotsearch().then( response => {  this.setState({ sousuofaxian:response.data.list }) } ) }

    subOne = () => {
        this.props.history.go(-1)
    }

    clearSearch = () => {
        this.setState({ state_search:[] })
    }
}

export default search;